<template>
  <div>
    <van-nav-bar title="搜索中心" left-arrow></van-nav-bar>
    <!-- 1. 搜索区域 输入框 -->
    <van-search
      @input="hInputthrottle"
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
    >
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
    </van-search>

    <!-- 2. 搜索建议 -->
    <van-cell-group v-if="suggestions.length">
      <van-cell
        v-for="(suggestion, idx) in cSuggestions"
        :key="idx"
        icon="search"
        @click="hcSuggestions(idx)"
      >
      <div v-html="suggestion"></div>
      </van-cell>
    </van-cell-group>

    <!-- 3. 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"></van-cell>

      <van-cell
        v-for="(item,idx) in preservation"
        :key="idx"
        :title="item"
        @click="$router.push('/searchResult?keyword=' + item)">
        <van-icon name="close" @click="delPreservation"></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>
<script>
import { getSuggestion } from '@/api/search.js'
import { getHistory, setHistory } from '../../utils/storageHistory'
import { throttle } from '../../utils/tools.js'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '',
      suggestions: [], // 联想建议
      // 从本地储存中查找,如果找不到用[]
      preservation: getHistory() || [] // 搜索保存历史记录
    }
  },
  computed: {
    // 高亮
    cSuggestions () {
      const reg = new RegExp(this.keyword, 'gi')
      return this.suggestions.map(sug => sug.replace(reg, val => '<span style="color:red">' + val + '</span>'))
    }
  },
  methods: {
    //  添加搜索历史记录
    // 添加一条历史
    addHistory (keyword) {
      // (1) 找一下，是否有重复，如果有，就是删除
      const idx = this.preservation.indexOf(keyword)
      if (idx > -1) {
        this.preservation.splice(idx, 1)
      }
      // (2) 加在数组的前面
      this.preservation.unshift(keyword)
      // (3) 持久化
      setHistory(this.preservation)
    },
    // 删除历史记录
    delPreservation (idx) {
      this.preservation.splice(idx, 1)
      // 持久化
      // removeHistory(this.preservation)
    },
    onSearch () {
      // 添加一条历史
      if (this.keyword === '') {
        return
      }
      this.addHistory(this.keyword)
      console.log(this.keyword)
      this.$router.push('/searchResult?keyword' + this.keyword)
    },
    hcSuggestions (idx) {
      this.addHistory(this.suggestions[idx])
      this.$router.push('/searchResult?keyword' + this.suggestions[idx])
    },
    // 节流处理的方法
    hInputthrottle: throttle(function () {
      console.log('throttle', this)
      this.hInput()
    }, 500),
    // 用户在搜索框输入的内容发生了变化
    async hInput () {
      console.log(this.keyword)

      // 如果用户没有输入任何内容，则清空建议，不要发请求了
      if (this.keyword === '') {
        this.suggestions = []
        return
      }
      try {
        const res = await getSuggestion(this.keyword)
        console.log(res)
        // 取回原来的数据,直接在原来数据的基础上做替换
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
